<template>
<div class="cart flex-column">
    <div class="header flex-center-space-between">
        <div></div>
        <van-button type="danger" size="mini" style="width: 70px" round plain @click="del">删除</van-button>
    </div>
    <div class="shop-box overflow-y">
        <div class="item pb10 pt10 mb10" v-for="(item, index) in list" :key="index">
            <div class="flex-center-space-between height100" >
                <div class="width-40 flex-center-end" v-show="edit">
                    <van-checkbox :value="item.is_checked === 1" checked-color="#ee0a24" :name="1" @click="change(index)"></van-checkbox>
                </div>
                <div class="shop-box-data flex-1 flex-center pl10 pr20">
                    <RouterLink :to="`/product?id=${item.id}`">
                        <img :src="item.cover_img" alt="">
                    </RouterLink>
                    <div class="msg flex-1 text-left ">
                        <div class=" blod name van-multi-ellipsis--l2 fz-12">
                            {{item.name}}
                        </div>
                        <div class="price fz-16 blod">
                            ￥{{item.price}}
                        </div>
                        <div class="text-gray fz-12 flex-center-space-between">
                            <div class="padd">
                                库存数量：{{item.stock}}套
                            </div>
                            <van-stepper v-model="item.buy_num" integer input-width="1rem" button-size="0.6rem" :max="item.stock" @change="countChange($event, index)" />
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <van-empty
            v-if="!list.length"
            class="custom-image"
            description="购物车空空如也~"
        >
            <template #image>
                <img src="@/assets/image/empty.png" alt="">
            </template>
            <van-button style="width: 4rem" size="small" round type="danger" @click="$router.push('/classify')">立即逛逛</van-button>
        </van-empty>
    </div>


    <div class="footer flex-center-space-between height-60 pl20 pr20 bgc-white" v-show="edit">
        <div class="flex-center">
            <div class="flex-column ai-end">
                <div class="flex-center">
                    <van-checkbox class="pr10" :value="allCheck" checked-color="#ee0a24" @click="allChange">全选</van-checkbox>
                    <span class="fz-12">合计：</span> <span class="price blod fz-16">￥{{ sum }}</span>
                </div>
                <div class="fz-12">(含税不含运费)</div>
            </div>
        </div>
        <van-button type="danger" size="small" round @click="submit" style="width: 2rem">去结算</van-button>
    </div>

</div>
</template>

<script>

export default {
    data () {
        return {
            list: [],
            edit: true
        }
    },
    computed: {
        // 是否全选
        allCheck () {
            if (this.list.length === 0) return false
            return this.list.every(v => v.is_checked === 1)
        },
        // 总价
        sum () {
            return this.list.reduce((p, c) => {
                if (c.is_checked === 1) {
                    p += (+c.price * c.buy_num)
                }
                return p
            }, 0)
        }
    },
	created () {
		
		this.getBaseInfo()
		
	},
    methods: {
        // 更新数量
        countChange (val, index) {
            // console.log(val, index)
            const goods = this.list[index]
            this.$goods.addCart({ goods_id: goods.id, sku_id: goods.sku_id, c_num: goods.buy_num }).catch(() => {
                this.getBaseInfo()
            })
        },
        // 选中发请求
        change (index) {
            const goods = this.list[index]
            const is_checked = (goods.is_checked === 0 ? 1 : 0)
            this.$goods.checkCartGoods(is_checked, goods.cart_id).then(() => {
                this.list[index].is_checked = is_checked
            })
        },
        // 全选 ro 取消全选
        allChange () {
            let isChec = this.allCheck ? 0 : 1
            let ids = this.list.map(v => v.id)
            this.$goods.checkCartGoods(isChec, ids).then(() => {
                this.list.forEach((goods, index) => {
                    this.$set(this.list[index], 'is_checked', isChec)
                })
            }).catch(() => {
                this.getBaseInfo()
            })
        },
        // 删除
        del () {
			
            // const ids = this.list.filter(v => v.is_checked === 1).map(goods => goods.id)
			const cart_ids = this.list.filter(v => v.is_checked === 1).map(goods => goods.cart_id)
            if (cart_ids.length === 0) return this.$toast('请选择需要删除的商品')
            this.$dialog.confirm({ title: '提示', message: '确认删除选中商品' })
                .then(() => {
                    // this.list = this.list.filter(goods => goods.select)
                    
                    this.$goods.deleteCart(cart_ids).then(() => {
                        this.getBaseInfo()
                    })
                })
        },
        // // 店铺商品全选
        // shopAllCheck (index) {
        //     const check = !this.isCheckout(index)
        //     this.list[index].childs.forEach((v,i) => {
        //         this.$set(this.list[index].childs[i], 'select', check)
        //     })
        // },
        // // 判断店铺下的商品是否全选
        // isCheckout (index) {
        //     return this.list[index].childs.every(v => v.select)
        // },
        // 结算
        submit () {
			// const cart_ids = this.list.filter(v => v.select).map(goods => goods.cart_id)
            if (this.list.length === 0) return this.$toast('购物车没有商品')
            this.$router.push(`/checkout?channel=cart`)
        },
		// 购物车列表
		getBaseInfo (){
			
			this.$goods.findCart().then((res) => {
				const data = res.data||{}
				
				// this.list = data.mch_goods_list[0].goods_list ||[]
				const list = data.mch_goods_list.map(item => {
                    return item.goods_list
                })

                let news = []
                list.forEach(v => {
                    v.forEach(goods => {
                        let sku = {}
                        if (goods.sku_id !== 0) {
                            var go = goods.sku_price.find(v => v.id === goods.sku_id)
                            sku.price = go.price
                            sku.stock = go.stock
                        }
                        // console.log(go)
                        news.push({...goods, ...sku})
                    })
                })
				this.list = news
			})
		},
		
    }
}
</script>

<style lang="less" scoped>
.header {
    height: 40px;
    padding: 0 20px;
}

.item {
    background-color: #fff;
    &:last-child {
        margin-bottom: 20px;
    }
    .shop-box-data {
        img {
            height: 80px;
            min-width: 80px;
            width: 80px;
        }
        .msg {
            // height: 56px;
            padding-left: 10px;
            width: 100%;
            .name {
                width: 100%;
            }
        }
    }
    .tag- {
        border-radius: 4px;
        margin-right: 10px;
    }
}
</style>
